import React from 'react'
import Particles from 'react-particles-js';
import { useNavigate } from 'react-router';
import { Button, Form, Input ,message} from 'antd';
import { LockOutlined, UserOutlined } from '@ant-design/icons';
import axios from 'axios';
import "./Login.css"
export default function Login() {
  const navigate = useNavigate()
  // 登录
  const onFinish = (values) => {
    axios.get(`/users?username=${values.username}&password=${values.password}&roleState=true&_expand=role`).then(res => {
    
      if (res.data.length === 0) {
        message.error('用户名或密码错误');
      } else {
        localStorage.setItem('token',JSON.stringify( res.data[0]));
        message.success('登陆成功');
        navigate('/home')
      }
    })
  }
  return (
    <div style={{ background: 'rgb(35,39,65', height: '100%' }}>
      <Particles />
      <div className="formContainer">
        <div className='loginTitle'>全球新闻发布管理层系统</div>
        <Form
          name="normal_login"
          className="login-form"
          initialValues={{
            remember: true,
          }}
          onFinish={onFinish}
        >
          <Form.Item
            name="username"
            rules={[
              {
                required: true,
                message: 'Please input your Username!',
              },
            ]}
          >
            <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="Username" />
          </Form.Item>
          <Form.Item
            name="password"
            rules={[
              {
                required: true,
                message: 'Please input your Password!',
              },
            ]}
          >
            <Input
              prefix={<LockOutlined className="site-form-item-icon" />}
              type="password"
              placeholder="Password"
            />
          </Form.Item>

          <Form.Item>
            <Button type="primary" htmlType="submit" className="login-form-button">
              登录
            </Button>
          </Form.Item>
        </Form>
      </div>
    </div>
  )
}
